<ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay" tdLoadingType="circular" class="layout-fill">
  <mat-card class="mat-typography">
    <mat-card-header>
      <mat-card-title>
        <mat-icon class="kylo-title-icon">{{kyloIcons_Links_profile}}</mat-icon>
        <span translate>Profile.History.Title</span>
      </mat-card-title>
      <mat-card-subtitle translate>Profile.History.SubTitle</mat-card-subtitle>
    </mat-card-header>

    <mat-card-content>
      <div *ngIf="showSummary">
        <td-data-table
            #dataTable
            [data]="profileSummary"
            [columns]="columns"
            [clickable]="true"
            (rowClick)="viewProfileResults($event)"
            [style.min-height.px]="200">
        </td-data-table>
        <div class="md-padding" *ngIf="!dataTable.hasData" layout="row" layout-align="center center">
          <h3>No results to display.</h3>
        </div>
        <td-paging-bar #pagingBar [pageSize]="pageSize" [total]="filteredTotal" (change)="page($event)">
          <span hide-xs>Rows per page:</span>
          <mat-select [style.width.px]="50" [(ngModel)]="pageSize">
            <mat-option *ngFor="let size of [10, 50, 100, 200, 500]" [value]="size">
              {{size}}
            </mat-option>
          </mat-select>
          {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
        </td-paging-bar>
      </div>
      <div *ngIf="showNoResults" class="no-data" fxLayout="column" fxLayoutAlign="center center">
        <ng-md-icon class="tc-grey-500" icon="find_in_page" size="96"></ng-md-icon>
        <h2 translate>views.profile-history.NoProfileData</h2>
      </div>
    </mat-card-content>
  </mat-card>

</ng-template>